<template>
  <div id="setting">
    <div class="nav">
      <p>积分设置</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>积分设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="head">
      <el-input v-model="name" placeholder="类别名称"></el-input>
      <el-button
        type="primary"
        @click="search"
        class="search"
        icon="el-icon-search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        @click="reset"
        class="reset"
        icon="el-icon-refresh"
        >重置</el-button
      >
    </div>

    <div class="content">
      <div class="nav-list">
        <p class="list">查询结果列表</p>
        <el-button type="primary" class="add" @click="addDialog = true"
          >新增</el-button
        >
      </div>

      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="typeNumber"
          label="类别编号"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="typeName" label="类别名称" align="center">
        </el-table-column>
        <el-table-column prop="typeValue" label="积分值" align="center">
        </el-table-column>
        <el-table-column
          prop="calculationrulesId"
          label="计算规则"
          align="center"
        >
          <template slot-scope="scope"
            ><span>{{
              scope.row.calculationrulesId == 0 ? "每天" : "每周"
            }}</span></template
          >
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span
              style="color: #0bb197; margin-right: 15px"
              @click="editOpen(scope.$index, scope.row)"
              >编辑</span
            >
            <span style="color: #0bb197" @click="del(scope.$index, scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background="true"
      >
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增类别" :visible.sync="addDialog">
      <el-form :model="addData">
        <div>
          <el-form-item label="类别编号" :label-width="formLabelWidth">
            <el-input
              v-model="addData.typeNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="计算规则" :label-width="formLabelWidth">
            <el-select
              v-model="addData.calculationrulesId"
              placeholder="请选择"
            >
              <el-option label="每天" value="0"></el-option>
              <el-option label="每周" value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="类别名称" :label-width="formLabelWidth">
            <el-input
              v-model="addData.typeName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="积分值" :label-width="formLabelWidth">
            <el-input
              v-model="addData.typeValue"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button class="footer" type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑类别" :visible.sync="editDialog">
      <el-form :model="editData">
        <div>
          <el-form-item label="类别编号" :label-width="formLabelWidth">
            <el-input
              v-model="editData.typeNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="计算规则" :label-width="formLabelWidth">
            <el-select
              v-model="editData.calculationrulesId"
              placeholder="请选择"
            >
              <el-option label="每天" value="0"></el-option>
              <el-option label="每周" value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="类别名称" :label-width="formLabelWidth">
            <el-input
              v-model="editData.typeName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="积分值" :label-width="formLabelWidth">
            <el-input
              v-model="editData.typeValue"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button class="footer" type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      pagenum: 1,
      count: 5,
      total: 0,
      addDialog: false,
      editDialog: false,
      addData: {
        typeNumber: "",
        typeName: "",
        typeValue: '',
        calculationrulesId: "",
      },
      editData: {
        id: 0,
        typeNumber: "",
        typeName: "",
        typeValue: 0,
        calculationrulesId: "",
      },
      formLabelWidth: "120px",
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/smart/integral-type/integralTypes",
        method: "get",
        params: {
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败");
        }
      });
    },
    add: function () {
      this.$axios({
        url: "/smart/integral-type/add",
        method: "post",
        data: {
          id: this.addData.id,
         typeNumber: this.addData.typeNumber,
          typeName: this.addData.typeName,
          typeValue: this.addData.typeValue,
          calculationrulesId: Number(this.addData.calculationrulesId),
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.addDialog = false;
          this.$message.success("添加成功！");
          this.getData();
          this.addData = {};
        } else {
          this.$message.error("添加失败!");
        }
      });
    },
    editOpen(index) {
      this.editDialog = true;
      this.$axios({
        url: "/smart/integral-type/integral/" + this.tableData[index].id,
        method: "get",
        // params: { id: this.tableData[index].id },
      }).then(({ data }) => {
        if (data.code =='00000') {
          this.editData = data.data;
          this.editData.calculationrulesId =
            this.editData.calculationrulesId + "";
        }
      });
    },
    edit: function () {
      this.$axios({
        url: "/smart/integral-type/edit",
        method: "put",
        data: {
          id:this.editData.id,
         typeNumber: this.editData.typeNumber,
         typeName: this.editData.typeName,
         typeValue: this.editData.typeValue,
         calculationrulesId: Number(this.editData.calculationrulesId),
        },
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.editDialog = false;
          this.getData();
          this.$message.success("修改成功！");
        } else {
          this.$message.error("修改失败！");
        }
      });
    },
    del(index) {
      this.$axios({
        url: "/smart/integral-type/integral/" + this.tableData[index].id,
        method: "delete",
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    search: function () {
      this.$axios({
        url: "/smart/integral-type/integralType",
        method: "post",
        params: {
          name: this.name,
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.tableData=data.data.list;
          this.total = data.total;
        }else{
          this.$message.error("查询失败")
        }
      });
    },
    reset:function(){
      this.name='';
      this.getData()
    }
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#setting {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 10px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 20px 0;
}
.search,
.add {
  background: #0bb197;
  border: 1px solid #0bb197;
  height: 40px;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  //   padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.el-form {
  display: flex;
  justify-content: space-between;
}
.dialog-footer {
  text-align: center;
}
.footer {
  background: #0bb197;
  border: 1px solid #0bb197;
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
#setting {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .el-dialog__title {
    color: white;
  }
}
</style>